<script setup>
import { onMounted, ref, defineProps } from 'vue'
const props = defineProps({
  videoSrc: {
    type: String
  },
  rangeName: {
    type: String,
    default: ''
  }
})
const videoPlayer = ref(null)
const seekBar = ref(null)
const volumeControl = ref(null)
const videoVolumn = ref(0)
const isPlaying = ref(false)
const playButtonClass = ref('icon-play-fill')
const muteButtonClass = ref('icon-sound-filling-fill')
const currentTimeStr = ref('00:00')
const totalTimeStr = ref('00:00')
function videoplaypause() {
  if (isPlaying.value) {
    videoPlayer.value.pause()
    playButtonClass.value = 'icon-play-fill'
    isPlaying.value = false
  } else {
    videoPlayer.value.play()
    playButtonClass.value = 'icon-suspended-fill'
    isPlaying.value = true
  }
}
function updateSeekBar() {
  seekBar.value.value = (videoPlayer.value.currentTime / videoPlayer.value.duration) * 100
}
function updateVideo() {
  videoPlayer.value.currentTime = (seekBar.value.value * videoPlayer.value.duration) / 100
}
function updateVideoTime() {
  let minutes = Math.floor(videoPlayer.value.currentTime / 60)
  let seconds = Math.floor(videoPlayer.value.currentTime % 60)
  currentTimeStr.value = `${minutes}:${seconds.toString().padStart(2, '0')}`
  let totalMinutes = Math.floor(videoPlayer.value.duration / 60)
  let totalSeconds = Math.floor(videoPlayer.value.duration % 60)
  totalTimeStr.value = `${totalMinutes}:${totalSeconds.toString().padStart(2, '0')}`
}
function updateVideofromSeekBar() {
  updateVideo()
  updateVideoTime()
}
function changeMute() {
  if (videoPlayer.value.muted) {
    videoPlayer.value.muted = false
    muteButtonClass.value = 'icon-sound-filling-fill'
    volumeControl.value.value = videoVolumn.value
  } else {
    videoPlayer.value.muted = true
    muteButtonClass.value = 'icon-sound-Mute1'
    videoVolumn.value = volumeControl.value.value
    volumeControl.value.value = 0
  }
}
function changeVolumn() {
  videoPlayer.value.volume = volumeControl.value.value
}
function playBackward() {
  videoPlayer.value.currentTime -= 10
  updateVideoTime()
  updateSeekBar()
}
function playForeward() {
  videoPlayer.value.currentTime += 10
  updateVideoTime()
  updateSeekBar()
}
onMounted(() => {})
</script>

<template>
  <div class="video-container">
    <video
      id="videoPlayer"
      ref="videoPlayer"
      :src="props.videoSrc"
      @loadedmetadata="updateVideofromSeekBar"
      @click="videoplaypause"
    >
      <source type="video/mp4" />
      Your browser does not support the video tag.
    </video>
    <div ref="videoControls" class="controls">
      <div class="control-buttons">
        <button
          id="rewindButton"
          ref="rewindButton"
          class="iconfont icon-double-arrow-left"
          @click="playBackward"
        ></button>
        <button
          id="playButton"
          ref="playButton"
          class="iconfont"
          :class="playButtonClass"
          @click="videoplaypause"
        ></button>
        <button
          id="fastForwardButton"
          class="iconfont icon-double-arro-right"
          @click="playForeward"
        ></button>
      </div>
      <div class="time-display">
        <span id="currentTime">{{ currentTimeStr }}</span> /
        <span id="duration">{{ totalTimeStr }}</span>
      </div>
      <input
        id="seekBar"
        ref="seekBar"
        type="range"
        min="0"
        max="100"
        value="0"
        @input="updateVideofromSeekBar"
      />
      <div class="volume-control">
        <button
          id="muteButton"
          class="iconfont"
          :class="muteButtonClass"
          @click="changeMute"
        ></button>
        <input
          id="volumeControl"
          ref="volumeControl"
          type="range"
          :name="rangeName"
          min="0"
          max="1"
          step="0.1"
          value="1"
          @input="changeVolumn"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #333;
  border-radius: 0.6rem;
  overflow: hidden;
  border: 0px solid blue;

  #videoPlayer {
    width: auto;
    height: calc(100% - 3rem);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

  input[type='range'] {
    height: 3rem;
    line-height: 3rem;
    -webkit-appearance: none; /* 去掉默认样式 */
    appearance: none;
    background-color: transparent;

    &::-webkit-slider-runnable-track {
      background-color: aquamarine;
      height: 0.4rem;
      border-radius: 0.4rem;
    }
    &:-webkit-slider-runnable-track{
      background: #FF5722;
    }
    &::-webkit-slider-thumb {
      -webkit-appearance: none; /* 去掉默认样式 */
      appearance: none;
      width: 1rem; /* 按钮宽度 */
      height: 1rem; /* 按钮高度 */
      transform: translateY(-0.2rem);
      background-color: #ff5722; /* 按钮颜色 */
      border: none; /* 去掉边框 */
      border-radius: 50%; /* 圆形按钮 */
      cursor: pointer; /* 鼠标悬停时的样式 */
    }
  }
  .controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 60, 0, 0.7);
    height: 3rem;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .control-buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .volume-control {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .control-buttons button,
    .volume-control button {
      color: white;
      font-size: 2.5rem;
      background: none;
      border: none;
      cursor: pointer;
    }

    #playButton {
      color: white;
      background-color: transparent;
      font-size: 3rem;
      border: 0px solid red;
    }

    .time-display {
      color: white;
      font-size: 1rem;
    }

    #seekBar {
      width: 50%;
      margin: 0 1rem;
    }

    #volumeControl {
      width: 50%;
      margin-left: 20px;
    }
  }
}
</style>
